import {useEffect, useState} from "react";
import classNames from "classnames";
import TextSide from "./child/TextSide";
import ImgSide from "./child/ImgSide";
import TplSide from "./child/TplSide";
import GraphSide from "./child/GraphSide";
import './index.less'
export const isTplSide = "TplSide";
export const isTextComponent = 1;
export const isImgComponent = 2;
export const isGraphComponent = 3;
const SideBox = () => {
    const [showSide, setShowSide] = useState<any>(0);

    const _setShowSide = (which: any) => {
        if (showSide === which) {
            setShowSide(0);
        } else {
            setShowSide(which);
        }
    };

    useEffect(() => {
        // @ts-ignore
        document.getElementById("center").addEventListener("click", () => {
            console.log('监听到了')
            setShowSide(0);
        });
    }, []);

    return (
        <div className={'side-box-main'}>
            <ul className={'cmps'}>
                <li
                    className={classNames(
                        'cmp',
                        showSide === isTplSide ? 'selected' : ""
                    )}
                    onClick={() => _setShowSide(isTplSide)}>
                    <i
                        className={classNames(
                            "iconfont icon-mobankuangjia-xianxing",
                            'cmpIcon'
                        )}
                    />
                    <span className={'cmpText'}>模板</span>
                </li>
                <li
                    className={classNames(
                        'cmp',
                        showSide === isTextComponent ? 'selected' : ""
                    )}
                    onClick={() => _setShowSide(isTextComponent)}>
                    <i className={classNames("iconfont icon-wenben", 'cmpIcon')}/>
                    <span className={'cmpText'}>文本</span>
                </li>
                <li
                    className={classNames(
                        'cmp',
                        showSide === isImgComponent ? 'selected': ""
                    )}
                    onClick={() => _setShowSide(isImgComponent)}>
                    <i className={classNames("iconfont icon-tupian", 'cmpIcon')}/>
                    <span className={'cmpText'}>图片</span>
                </li>
                <li
                    className={classNames(
                        'cmp',
                        showSide === isGraphComponent ? 'selected' : ""
                    )}
                    onClick={() => _setShowSide(isGraphComponent)}>
                    <i
                        className={classNames("iconfont icon-graphical", 'cmpIcon')}
                    />
                    <span className={'cmpText'}>图形</span>
                </li>
            </ul>
            {showSide === isTextComponent && <TextSide/>}
            {showSide === isImgComponent && <ImgSide/>}
            {showSide === isTplSide && <TplSide/>}
            {showSide === isGraphComponent && <GraphSide/>}
        </div>

    )
}

export default SideBox
